import React, { useState } from "react";
import MyDate from "./MyDate/MyDate";
import "./LogItem.css";
import Card from "../../UI/Card/Card";
import ConfirmModal from "../../UI/ConfirmModel/ConfirmModal";

const LogItem = (props) => {
  /*
   *   props是只读的不能修改
   * */
  // props.desc = '嘻嘻'; // 不能修改props中的属性
  // console.log(props.desc);
  let deleteHandler = () => {
    console.log("点删除");
    setShowConfirm(true);
    // const isDelete = window.confirm("Are you sure you want to delete");
    // if (isDelete) {
    //   //移除指定的数据 ？ 怎么删除App.js里面的数据
    //   //干脆直接在App里面指定一个函数来删除
    //   // console.log(props.onDeleteLog)
    //   props.onDeleteLog()
    //   setShowConfirm(false)
    // } else {
    //   setShowConfirm(false)
    // }
  };
  let [showConfirm, setShowConfirm] = useState(false);
  let cancelHandler = () => {
    console.log("点了取消");
    setShowConfirm(false);
  };
  let OKHandler = () => {
    console.log("点了OK");
    props.onDeleteLog()
    setShowConfirm(false);
  };

  /**
   * 使用传送门 portal
   * 将组件渲染到页面中的指定位置
   *     --使用方法 
   *         1.在index.html中添加一个新的元素
   *                <div id="mask-root"></div>
   *         2.修改组件的渲染方式 
   *                通过ReactDOM.createPortal(jsx,target)  最为返回值创建元素
   *                参数 :  
   *                       jsx :  需要渲染的jsx代码
   *                       target :   目标位置(DOM元素)
   */
  return (
    <Card className="item">
      {showConfirm && (
        <ConfirmModal
          msg="该操作不可恢复！确认吗？"
          onOK={OKHandler}
          onCancel={cancelHandler}
        />
      )}
      <MyDate date={props.date} />
      {/* 日志内容的容器 */}
      <div className="content">
        {/* 如果将组件中的数据全部写死，将会导致组件无法动态设置，不具有使用价值
            我们希望组件数据可以由外部设置，在组件间，父组件可以通过props（属性）向子组件传递数据 */}
        <h2 className="desc">{props.desc}</h2>
        <div className="time">{props.time}分钟</div>
      </div>
      {/* 删除按钮 */}
      <span className="delete" onClick={deleteHandler}>
        X
      </span>
    </Card>
  );
};

export default LogItem;
